<template>
	<div class="register-cont">
		<div class="register">
			<div class="register-title">
				<span class="title-name">注册账户资料</span>
				<p class="hasUser">已有账户，<span class="go-login" @click="goLogin">马上登录</span></p>
			</div>
			<div class="register-form">
				<el-form ref="ruleForm" :rules="rules" :model="params" label-width="92px" :inline="true">
					<div class="form-title">基本信息</div>
					<el-form-item label="注册邮箱" prop="email">
						<el-input v-model="params.email"></el-input>
					</el-form-item>
					<el-form-item label="学号" prop="userName">
						<el-input v-model="params.userName"></el-input>
					</el-form-item>
					<el-form-item label="真实姓名" prop="realName">
						<el-input v-model="params.realName"></el-input>
					</el-form-item>
					<el-form-item label="身份证号" prop="cardNumber">
						<el-input v-model="params.cardNumber"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userPwd">
						<el-input show-password v-model="params.userPwd"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="userPwdD">
						<el-input show-password v-model="params.userPwdD"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="mobile">
						<el-input v-model="params.mobile"></el-input>
					</el-form-item>
					<el-form-item label="所在地">
						<el-input v-model="params.address"></el-input>
					</el-form-item>
					<div class="form-title">学校信息</div>

					<el-form-item label="所在省份">
						<el-select v-model="province" placeholder="请选择所在省份" @change="provinceChange">
							<el-option v-for="item in provinceList" :label="item.deptName" :value="item.deptId"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="所在院校" prop="deptId">
						<el-select v-model="params.deptId" placeholder="请选择所在院校">
							<el-option v-for="item in school" :label="item.deptName" :value="item.deptId"></el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="入学时间" prop="enrollmentTime">
						<el-date-picker v-model="params.enrollmentTime" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="指导老师" prop="guidanceTeacher">
						<el-input v-model="params.guidanceTeacher"></el-input>
					</el-form-item>
					<el-form-item class="full-item">
						<el-checkbox v-model="isSure">我已阅读，并同意《高校信息素养教育数据库平台协议》</el-checkbox>
					</el-form-item>
					<el-form-item class="full-item">
						<el-button type="primary" @click="submitForm('ruleForm')">立即注册</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		registerApi,
		getSchoolTreeApi,
		getProvinceApi,
		getSchoolApi
	} from '@/api/Login'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.params.userPwd !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.params.userPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				params: {
					// address: "131",
					// cardNumber: "123",
					// deptId: 102,
					// email: "1123@qq.co",
					// enrollmentTime: "2023-12-11",
					// guidanceTeacher: "123",
					// mobile: "13864350892",
					// realName: "123",
					// userName: "123123",
					// userPwd: "123",
					// userPwdD: "123",
				},
				rules: {
					email: [{
						required: true,
						message: '请输入正确邮箱',
						trigger: 'blur'
					}],
					userName: [{
						required: true,
						message: '请输入学号',
						trigger: 'blur'
					}],
					realName: [{
						required: true,
						message: '请输入真实姓名',
						trigger: 'blur'
					}],
					cardNumber: [{
						required: true,
						message: '请输入正确身份证号',
						trigger: 'blur'
					}],
					userPwd: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					userPwdD: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入正确手机号',
						trigger: 'blur'
					}],
					deptId: [{
						required: true,
						message: '请选择所在院校',
						trigger: 'change'
					}],
					enrollmentTime: [{
						required: true,
						message: '请选择入学日期',
						trigger: 'blur'
					}],
					guidanceTeacher: [{
						required: true,
						message: '请填写指导老师',
						trigger: 'blur'
					}],
				},
				isSure: false,
				provinceList: [],
				province: '',
				school: [],
				schoolTree: []
			}
		},
		created() {
			this.getProvince()
		},
		methods: {
			provinceChange() {
				this.getSchoolList()
			},
			getSchoolList() {
				getSchoolApi({
					deptid: this.province
				}).then(res => {
					this.school = res.data
					console.log(res)
				})
			},
			getProvince() {
				getProvinceApi().then(res => {
					this.provinceList = res.data
				})
			},
			getSchoolTree() {
				getSchoolTreeApi().then(res => {
					let list = res.data
					this.schoolTree = list
				})
			},
			handleChange() {

			},
			submitForm(formName) {
				if (!this.isSure) {
					this.$alert('请先阅读并同意《高校信息素养教育数据库平台协议》', {
						confirmButtonText: '同意',
						callback: action => {
							this.isSure = true
						}
					});
					return false
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.params)
						this.register()
					} else {
						return false;
					}
				});
			},
			register() {
				let params = this.params
				params.enrollmentTime = this.formateDate(params.enrollmentTime)
				registerApi(params).then(res => {
					if (res.code != 200) {
						return false
					}
					this.$alert('注册成功', {
						confirmButtonText: '去登录',
						callback: action => {
							this.$router.replace('/Login')
						}
					});
					this.$refs['ruleForm'].resetFields();
				})
			},
			formateDate(num) {
				let date = new Date(num)
				let y = date.getFullYear(),
					mm = date.getMonth() + 1,
					d = date.getDate(),
					hour = date.getHours(),
					m = date.getMinutes(),
					s = date.getSeconds(),
					timer =
					y +
					'-' +
					this.fillZero(mm) +
					'-' +
					this.fillZero(d)
				return timer
			},
			fillZero(val) {
				return val < 10 ? '0' + val : val
			},
			goLogin() {
				this.$router.replace('/Login')
			}
		}
	}
</script>

<style lang="less">
	@contWidth: 876px;

	.register-cont {
		background-color: #F7F7F7;

		.register {
			width: @contWidth;
			margin: 0 auto;
		}

		.register-title {
			height: 84px;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
		}

		.title-name {
			font-size: 20px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.hasUser {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.go-login {
			color: #2360FE;
			cursor: pointer;
		}

		.register-form {
			background: #FFFFFF;
			box-shadow: 0px 2px 17px 0px rgba(233, 206, 26, 0.01);
			border-radius: 10px;
			padding: 30px 0 119px 48px;
		}

		.form-title {
			padding: 15px 0 20px;
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.el-form--inline .el-form-item {
			margin: 0 48px 16px 0;
		}

		.el-form-item__content {
			width: 273px;
		}

		.el-select {
			width: 273px;
		}

		.el-cascader {
			width: 273px;
		}

		.el-date-editor.el-input,
		.el-date-editor.el-input__inner {
			width: 273px;
		}

		.full-item {
			width: 100%;
			display: flex;
			justify-content: center;
			padding-top: 50px;

			.el-form-item__content {
				width: initial;
			}
		}

		.el-button {
			width: 415px;
			height: 54px;
			background: #FCDE14 linear-gradient(129deg, #3CA7FF 0%, #0087FF 100%);
			border-radius: 27px;
			font-size: 20px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>